<template>
  <div class="article-detail-page">
    <!-- 返回文章列表按钮 -->
    <router-link to="/article" class="back-button">返回文章列表</router-link>
    <!-- 文章标题 -->
    <h1 v-if="articleInfo" class="article-detail-title" style="word-wrap: break-word; overflow-wrap: break-word;">{{ articleInfo.title }}</h1>
    <!-- 文章元信息 -->
    <p v-if="articleInfo" class="article-detail-meta">
      发表时间: {{ articleInfo.addedTime || '未知' }} | 作者: {{ articleInfo.authorName || '未知' }}
    </p>
    <!-- 文章内容 -->
    <div v-if="articleInfo" v-html="articleInfo.body" class="article-detail-content" style="word-wrap: break-word; overflow-wrap: break-word;"></div>
    <!-- 评论表单 -->
    <div v-if="isLogin" class="comment-form-container">
      <h2 class="comment-title">发表评论</h2>
      <form class="comment-form">
        <textarea
          v-model="replyContent"
          placeholder="请输入评论内容"
          class="comment-textarea"
        ></textarea>
        <button type="button" class="comment-submit-button" @click="addReply">提交</button>
      </form>
    </div>
    <!-- 评论列表 -->
    <div v-if="comments.length > 0" class="comment-list">
      <h2 class="comment-title">评论列表</h2>
      <div v-for="comment in comments" :key="comment.id" class="comment-item">
        <p class="comment-body" style="word-wrap: break-word; overflow-wrap: break-word;">{{ comment.body }}</p>
        <p class="comment-meta">评论时间: {{ comment.addedTime || '未知' }}</p>
      </div>
    </div>
    <div v-else class="no-comments">暂无评论</div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { getSingle, add, getList } from '../utils/request';
import { useRoute } from 'vue-router';
import { useUserStore } from '../stores/user';
import { ElMessageBox } from 'element-plus';

const userStore = useUserStore();
const isLogin = ref(userStore.isAuthenticated);
const user = ref(userStore.getUser);

// 定义文章信息的接口
interface Article {
  title?: string;
  addedTime?: string;
  authorName?: string;
  body?: string;
}

const comments = ref<any[]>([]);
const route = useRoute();
// 声明 articleInfo 的类型为 Article
const articleInfo = ref<Article | null>(null);
// 定义回复内容的响应式属性
const replyContent = ref<string>('');

onMounted(async () => {
  try {
    const res = await getSingle(route.query.id);
    articleInfo.value = res;
    comments.value = await getList(4, route.query.id, '文章');
  } catch (error) {
    console.error('获取文章详情失败:', error);
  }
});

// 添加回复的方法
const addReply = async () => {
  if (user.value && user.value.id) {
    if (!replyContent.value) {
      ElMessageBox.alert('评论内容不能为空', '提示');
      return;
    }
    await add({
      articleid: route.query.id,
      body: replyContent.value,
      userid: user.value.id,
      replyType: '文章',
      typeIndex: 4,
    });
    replyContent.value = '';
    comments.value = await getList(4, route.query.id, '文章');
  } else {
    ElMessageBox.alert('请先登录', '提示');
  }
};
</script>

<style scoped>
.article-detail-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.back-button {
  display: inline-block;
  margin-bottom: 20px;
  background-color: #28a745;
  color: white;
  padding: 10px 20px;
  border-radius: 4px;
  text-decoration: none;
  transition: background-color 0.3s;
}

.back-button:hover {
  background-color: #218838;
}

.article-detail-title {
  font-size: 32px;
  margin-bottom: 10px;
}

.article-detail-meta {
  font-size: 14px;
  color: #666;
  margin-bottom: 20px;
}

.article-detail-content {
  line-height: 1.6;
  font-size: 16px;
  margin-bottom: 20px;
}

.comment-form-container {
  background-color: #f9f9f9;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
}

.comment-title {
  font-size: 20px;
  margin-bottom: 10px;
}

.comment-form {
  display: flex;
  flex-direction: column;
}

.comment-textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  min-height: 100px;
  margin-bottom: 10px;
}

.comment-submit-button {
  background-color: #28a745;
  color: white;
  padding: 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.comment-submit-button:hover {
  background-color: #218838;
}

.comment-list {
  background-color: #f9f9f9;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 20px;
}

.comment-item {
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 10px;
  margin-bottom: 10px;
}

.comment-body {
  line-height: 1.6;
  font-size: 16px;
  margin-bottom: 5px;
}

.comment-meta {
  font-size: 14px;
  color: #666;
}

.no-comments {
  font-size: 16px;
  color: #666;
  text-align: center;
}
</style>